<template>
  <div class="videoConfig">
    <!-- 查询条件 -->
    <el-form
      ref="searchForm"
      :model="searchForm"
      :rules="rules"
      label-width="100px"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="机房名称" prop="machineRoomName">
            <el-input
              v-model="searchForm.machineRoomName"
              placeholder="请输入机房名称"
              maxlength="30"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="submitForm">查 询</el-button>
          <el-button @click="reset">重 置</el-button>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            @click="handleAdd"
            >新增</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <!-- 列表 -->
    <div class="tableBox">
      <el-table :data="tableList" border style="width: 100%" height="730px">
        <el-table-column label="煤矿ID" prop="mkId" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="煤矿名称" prop="mkName" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="机房编号" prop="machineRoomCode" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="机房名称" prop="machineRoomName" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="机房视频src" prop="src" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="创建人姓名" prop="createUserName" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="更新人名称" prop="updateUserName" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button class="operation-btn" type="text" size="mini" @click="detailsClick(scope.row)">修改</el-button>
            <el-button class="operation-btn" type="text" size="mini" @click="removeClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="float: right"
        background
        @current-change="pageNumChange"
        @size-change="pageSizeChange"
        :current-page="pageNum"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
    
    <!-- 新增 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="500px"
      append-to-body
    >
      <el-form ref="roleForm" :model="roleform" :rules="rolerules" label-width="100px">
        <el-form-item label="机房编号" prop="machineRoomCode">
          <el-input v-model="roleform.machineRoomCode"/>
        </el-form-item>
        <el-form-item label="机房名称" prop="machineRoomName">
          <el-input v-model="roleform.machineRoomName"/>
        </el-form-item>
        <el-form-item label="机房视频src" prop="src">
          <el-input v-model="roleform.src" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitDataScope">确 定</el-button>
        <el-button @click="cancelDataScope">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { infolist, submit, remove } from "@/api/oneself/videoConfig";

export default {
  name: "videoConfig",
  data() {
    return {
      // 查询条件
      searchForm: {
        machineRoomName: "",
      },
      rules: {},
      // 列表
      tableList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      // 新增-修改
      title: "",
      dialogVisible: false,
      roleform: {
        machineRoomName: "",
        src: "",
      },
      rolerules: {
        machineRoomName: [
          { required: true, trigger: "blur", message: "请输入机房名称" }
        ],
        src: [
          { required: true, trigger: "blur", message: "请输入机房视频src" }
        ],
      },
    };
  },
  methods: {
    // 删除
    async removeClick(row) {
      let params = {
        ids: row.id
      };
      const data = await remove(params);
      if (data && data.code === 200) {
        this.$message.success(data.message);
        this.queryList();
      } else {
        this.$message.error(data.message);
      }
    },
    // 提交
    submitDataScope() {
      this.$refs.roleForm.validate((valid) => {
        if (valid) {
          this.submitFun();
        }
      });
    },
    // 列表请求
    async submitFun() {
      let params = {
        ...this.roleform,
      };
      const data = await submit(params);
      if (data && data.code === 200) {
        this.$message.success(data.message);
        this.cancelDataScope();
      } else {
        this.$message.error(data.message);
      }
    },
    // 关闭详情弹框
    cancelDataScope() {
      this.dialogVisible = false;
      this.$set(this.$data, "roleform", {});
      this.queryList();
    },
    // 修改-打开详情弹框
    detailsClick(row) {
      this.title = "修改";
      this.roleform = row;
      this.dialogVisible = true;
    },
    // 新增-打开详情弹框
    handleAdd() {
      this.title = "新增";
      this.roleform = {};
      this.dialogVisible = true;
    },
    // ------------------------------------------------------------------------------------------
    // 查询
    submitForm() {
      this.$refs["searchForm"].validate((valid) => {
        if (valid) {
          this.queryList(1);
        }
      });
    },
    // 重置
    reset() {
      this.$set(this.$data, "searchForm", {});
      this.pageNum = 1;
      this.pageSize = 10;
      this.queryList();
    },
    // 分页
    pageNumChange(num) {
      this.pageNum = num;
      this.queryList();
    },
    pageSizeChange(size) {
      this.pageSize = size;
      this.queryList();
    },
    // 列表请求
    async queryList() {
      let pam = {
        ...this.searchForm,
      };
      let pam2 = {
        current: this.pageNum,
        size: this.pageSize,
      };
      const data = await infolist(pam, pam2);
      if (data && data.code === 200) {
        this.tableList = data.body.records;
        this.total = data.body.total;
      } else {
        this.$message.error(data.message);
      }
    },
  },
  created() {
    this.queryList(1);
  },
  mounted() {},
  beforeDestroy() {},
};
</script>

<style scoped lang="scss">
.videoConfig {
  width: 100%;
  height: 100%;
  padding: 20px;

  .operation-btn {
    margin: 0 10px;
  }

  .status-color {
    span {
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-right: 5px;
      border-radius: 50%;
    }
  }

  .status-color1 {
    color: #ff9502;

    span {
      background: #ff9502;
    }
  }

  .status-color2 {
    color: #4bd964;

    span {
      background: #4bd964;
    }
  }

  .status-color3 {
    color: #59c8fa;

    span {
      background: #59c8fa;
    }
  }

  .status-color4 {
    color: #999999;

    span {
      background: #999999;
    }
  }
}
</style>
